<template>
    <div class="main-body">
        <page-title title="速速联系" />
        <div class="container">
            <section class="section-padding">
                <div class="row">
                    <div class="section-title">
                        <h1>你确定要联系?</h1>
                        <p>你发过来的其实我也不太会看，不过为了保险起见留个联系页面到时候就按照这种格式填写就完事了，反正这也是个静态页面，我懒得搞了就这样</p>
                    </div>
                </div>
                <div class="row">
                    <div class="form">
                        <!-- 表单需要有背景阴影 -->
                        <!-- 表单需要有名字，电话，邮箱，服务类型 -->
                        <div class="quote-form">
                            <!-- 标题 -->
                            <div class="quote-form-title">
                                <h1>
                                    随时联络
                                </h1>
                                <p>
                                    如果您需要任何帮助，请给我们发邮件，但是我不会留邮箱的(╹ڡ╹ )
                                </p>
                            </div>
                            <div class="quote-form-body">
                                <el-form :model="formLabelAlign" style="max-width: 460px" size="large">
                                    <el-form-item>
                                        <el-input v-model="formLabelAlign.name" placeholder="您的名字" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="formLabelAlign.phone" placeholder="您的电话" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="formLabelAlign.email" placeholder="您的邮箱" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="formLabelAlign.sevice" class="m-2" placeholder="请选择服务类型">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                                :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <button class="click-on">
                                            提交申请
                                        </button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                    <div class="information">
                        <!-- 弹性布局，垂直,设置内边距 -->
                        <div class="contact-content">
                            <!-- h4,p -->
                            <h4>联系地址</h4>
                            <p>福州市仓山区大榕树文化创意园金达路130号5号楼3层（金山大润发对面）</p>
                            <p>厦门市思明区软件园二期望海路25号之二5楼</p>
                            <h4>联系电话</h4>
                            <p>0591-83713060</p>
                            <p>0592-5965232</p>
                            <div class="social">
                                <!-- 一堆的logo -->
                                <a href="https://weibo.com/">
                                    <svg-icon name="xinlangweibo" width="24px" height="24px"
                                        color="currentColor"></svg-icon>
                                </a>
                                <a href="https://tieba.baidu.com/index.html">
                                    <svg-icon name="baidutieba" width="24px" height="24px" color="currentColor"></svg-icon>
                                </a>
                                <a href="https://www.bilibili.com/">
                                    <svg-icon name="bilibili" width="24px" height="24px" color="currentColor"></svg-icon>
                                </a>
                                <a href="https://www.xiaohongshu.com/explore">
                                    <svg-icon name="xiaohongshu" width="24px" height="24px" color="currentColor"></svg-icon>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import PageTitle from "@/components/PageTitle/index.vue"


// 表单
const formLabelAlign = ref({
    name: '',
    phone: '',
    email: '',
    sevice: ''
})
const options = [
    {
        value: '仅该软件服务',
        label: '仅该软件服务'
    },
    {
        value: '软件服务和安装部署业务',
        label: '软件服务和安装部署业务'
    },
    {
        value: '我只要源码',
        label: '我只要源码'
    }
]
</script>

<style scoped lang="scss">
.main-body {
    min-height: 800px;

    .container {
        min-width: none;
        max-width: var(--min-width);
    }
}

.section-padding {
    padding: 120px 0;

    .row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 25px;

        .section-title {
            flex: 0 0 67%;
            margin-bottom: 25px;
            margin-top: -6px;
            text-align: center;

            h1 {
                line-height: 48px;
                font-size: 40px;
                font-weight: normal;
                margin-bottom: 15px;
            }

            p {
                margin-bottom: 50px
            }
        }

        .form {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 0.5rem;
            box-sizing: border-box;

            p {
                line-height: 33px;
                font-size: 12px;
                margin: 5px 0;
            }

            .el-form {
                gap: 12px;

                .click-on {
                    width: 100%;
                    height: 2.5rem;
                    border-radius: 3px;
                    border: 0;
                    background: var(--secondary-color);
                    color: var(--white);
                }
            }

        }

        .information {
            flex: 0 0 50%;
            max-width: 50%;
            background: #F9F9F9;

            .contact-content {
                height: 400px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                padding: 40px;
                font-family: "Open Sans", sans-serif;

                h4 {
                    font-weight: normal;
                    margin-bottom: 15px;
                    font-size: 24px;
                }

                p {
                    font-size: 14px;
                    margin-bottom: 5px;
                    color: #434a53;
                }

                .social {
                    margin-top: 20px;

                    a {
                        width: 24px;
                        height: 24px;
                        padding: 4px;
                        // font-size: 12px;
                        color: var(--white);
                        display: inline-block;
                        margin-right: 8px;
                        text-align: center;
                        border-radius: 50%;

                        &:nth-child(1) {
                            background-color: rgb(231, 31, 25);
                        }

                        &:nth-child(2) {
                            background-color: rgb(36, 130, 253);
                        }

                        &:nth-child(3) {
                            background-color: rgb(32, 176, 227);
                        }

                        &:nth-child(4) {
                            background-color: rgb(255, 46, 77);
                        }
                    }
                }
            }
        }
    }
}</style>